<template>
  <vc-page>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card title="SVG Sprite" hoverable>
          <vc-svg-icon src="./icons/logo.icon.svg" class="svg-sprite"></vc-svg-icon>
          <div>优点：可重复调用</div>
          <div>缺点：只能单色</div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="inline SVG" hoverable>
          <vc-svg-icon src="./icons/logo.icon.svg" inline class="inline-svg"></vc-svg-icon>
          <div>优点：支持多色</div>
          <div>缺点：DOM多</div>
        </a-card>
      </a-col>
    </a-row>
  </vc-page>
</template>

<style lang="scss" scoped>
  .svg-sprite {
    width: 100%;
    height: 300px;
    color: #409EFF;
    transition: color 1s;
    &:hover {
      color: $--color-primary;
    }
  }
  .inline-svg {
    width: 100%;
    height: 300px;
    :deep(path) {
      transition: fill 1s;
      fill: $--color-primary;
    }
    &:hover :deep(path) {
      &:nth-child(2) {
        fill: #41B883;
      }
      &:nth-child(3) {
        fill: #35495E;
      }
    }
  }
</style>
